<template>
	<div class="dialog-header">
		<div class="client-label">
			<span class="client-name ellipsis">{{currentClientInfo.real_name}}</span>
			<svg-icon iconClass="mobile" class="mobile-img"></svg-icon>
			<div class="client-info">
				<span class="info">{{currentClientInfo.age}}岁</span>
				<span class="info">{{currentClientInfo.gender === 'F' ? '女' : '男'}}</span>
				<span class="info">{{ hasCustomerDemand ? '已投保' : '未投保' }}</span>
			</div>
		</div>
		<div class="dialog-operate">
			<div class="info-wrap">
				<span v-if="!!customerDemandInfo" class="info-btn" @click.stop="showInfoDetail=!showInfoDetail">保障检视信息</span>
				<span v-else class="info-btn" @click="getAdviceInstruction('11')">推荐客户保障检视</span>
				<div v-if="!!customerDemandInfo && showInfoDetail" class="info-detail-wrap">
					<div class="info-detail">
						<div class="info-body">
							<div class="info-item">
								<div class="info-label">家庭情况</div>
								<div class="info-content">
									<span class="content">{{customerDemandInfo.familey_relations.length}}位家庭成员</span>
									<span class="status">家庭{{familyPhase[customerDemandInfo.family_phase]}}</span>
								</div>
							</div>
							<div class="info-item">
								<div class="info-label">已有保障</div>
								<div class="info-content-list">
									<span v-for="(item, index) of family_guaranteed_detail" class="content-item" :key="index">
										<span class="relations">{{item.name}}</span>
										<span>{{ item.contentStr }}</span>
									</span>
								</div>
							</div>
							<div class="info-item">
								<div class="info-label">保障缺口</div>
								<div class="info-content-list">
									<span v-for="(item, index) of notch_list" class="content-item" :key="index">
										<span class="relations">{{getRelation(item.relationship)}}</span>
										<span>{{ item.contentStr }}</span>
									</span>
								</div>
							</div>
						</div>
						<div class="ope-btns">
							<h-button type="info" class="btn" @click="getAdviceInstruction('13')">生成视频报告</h-button>
							<h-button type="info" class="btn" @click="getAdviceInstruction('12')">检视结果</h-button>
							<h-button type="info" class="btn" @click="getAdviceInstruction('11')">重新检视</h-button>
						</div>
					</div>
				</div>
			</div>
			<svg-icon iconClass="close" class="icon"/>
		</div>
	</div>
</template>

<script>
import arrowLeftImg from '@/assets/images/arrow-left.png'
import { mapState, mapMutations, mapActions } from "vuex"
export default {
	name: 'DialogHeader',
	data() {
		return {
			arrowLeftImg,
			showInfoDetail: false,
			familyPhase: {
				ds: '单身期',
				xc: '形成期',
				cz: '成长期',
				cs: '成熟期',
				sl: '衰老期'
			}
		}
	},
	computed: {
		...mapState('lm-chat', ['currentClientInfo', 'customerDemandInfo', 'hasCustomerDemand']),
		// 已有保障
		family_guaranteed_detail() {
			if(!this.customerDemandInfo || !this.customerDemandInfo.family_guaranteed_detail) return []
			return this.customerDemandInfo.family_guaranteed_detail.map(u => {
				u.contentStr = u.children.map(u => u.name).join('，')
				return u
			})
		},
		// 保障缺口
		notch_list() {
			if(!this.customerDemandInfo || !this.customerDemandInfo.notch_list) return []
			return this.customerDemandInfo.notch_list.map(u => {
				u.contentStr = u.notch_list.map(u => u.ensure_type_name).join('，')
				return u
			})
		}
	},
	mounted() {
		document.addEventListener('click', this.hideInfoDetail);
	},
	beforeDestroy() {
		document.removeEventListener('click', this.hideInfoDetail);
	},
	methods: {
		...mapActions('lm-chat', ['postGptMsg']),
		// 获取建议(代理人大模型对话发送消息接口)
		getAdviceInstruction(instruction_id) {
			let params = {
				instruction_id: instruction_id
			}
			switch(instruction_id) {
				case '11':
					params.instruction_name = '推荐客户保障检视'
					break
				case '12':
					params.instruction_name = '保障检视结果'
					break
				case '13':
					params.instruction_name = '生成保障检视视频报告'
					break
				default:
					break
			}
			this.postGptMsg(params)
		},
		// 根据code获取关系
		getRelation(code) {
			return this.customerDemandInfo.familey_relations.find(item => {
				return item.code == code
			}).label
		},
		// 隐藏保障检视信息
		hideInfoDetail() {
			this.showInfoDetail = false
		}
	}
}
</script>

<style lang="scss" scoped>
.dialog-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 25px;
	border-bottom: 1px solid rgba(231,231,231,1);
	.client-label {
		display: flex;
		align-items: center;
		.client-name{
			font-size: 14px;
			font-weight: bold;
		}
		.mobile-img{
			width: 18px;
			height: 18px;
			margin-left: 8px;
			margin-right: 16px;
		}
		.client-info{
			display: flex;
			color: #1E79E8;
			background-image: url('../../assets/images/arrow-left.png');
			background-position: 0%;
			background-size: 100% 100%;
			padding: 0 16px 0 22px;
			height: 30px;
			line-height: 30px;
			.info{
				margin-right: 10px;
			}
		}
	}
	.dialog-operate{
		display: flex;
		align-items: center;
		.info-wrap{
			position: relative;
			margin-right: 30px;
			.info-btn{
				background-image: linear-gradient(126deg, #4CBBF7 0%, #3696FF 100%);
				box-shadow: inset 0px 0px 4px 0px rgba(95,155,255,0.5);
				border-radius: 16px;
				display: inline-block;
				height: 32px;
				line-height: 32px;
				font-size: 14px;
				color: #FFFFFF;
				padding: 0 12px;
				cursor: pointer;
			}
			.info-detail-wrap{
				padding-top: 10px;
				position: absolute;
				top: 42px;
				right: 0;
				width: 440px;
				z-index: 100;
				background: #FFFFFF;
				box-shadow: 0px 0px 8px 0px rgba(95,113,223,0.26);
				border-radius: 8px;
				color: #565656;
				padding: 20px;
				.info-detail{
					.info-body{
						max-height: 500px;
						overflow: auto;
					}
					.info-item{
						margin-bottom: 16px;
						.info-label{
							font-size: 14px;
							color: #565656;
							font-weight: bold;
							margin-bottom: 10px;
						}
						.info-content{
							.status{
								margin-left: 30px;
							}
						}
						.info-content-list{
							background: #F7F9FF;
							border-radius: 8px;
							padding: 16px;
							.content-item{
								display: flex;
								margin-bottom: 12px;
								&:last-child{
									margin-bottom: 0;
								}
								.relations{
									font-weight: bold;
									margin-right: 20px;
									flex-shrink: 0;
								}
							}
						}
					}
					.ope-btns{
						display: flex;
						justify-content: flex-end;
						.btn{
							margin-left: 10px;
							border-radius: 4px;
						}
					}
				}
			}
		}
		.icon{
			width: 20px;
			height: 22px;
			cursor: pointer;
		}
	}
}
</style>